<template>
  <div>
    <div class="row-container">
      <h1 class="center maxContent">{{msg}}</h1>
    </div>

    <!-- <div class="row-container leftQ">
      <button @click="showAdd">添加学生</button>
    </div> -->

    <div class="row-container">
      <table class="dataTable center" id="stuTable">
        <thead>
        <tr class="odd">
          <th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>专业</th><th>生日</th><th>操作</th>
        </tr>
        </thead>
        <tbody>
          <tr v-for="(stu,index) in stuList">
            <td>{{index+1}}</td>
            <td>{{stu.sname}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.gender==0?'男':'女'}}</td>
            <td>{{stu.major}}</td>
            <td>{{stu.birthday}}</td>
            <td><button @click="showEdit(stu.id)">修改</button><button @click="delStu(stu.id)">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>


    <div class="row-container">
      <ul class="pageNav center" id="pageUl">
        <li v-for="page of totalPages"><a href="javascript:;" @click="changePage(page)">{{page}}</a></li>
      </ul>
    </div>

    <div class="dialog" v-show="dialogisShow">
      <span class="closeBt" @click="dialogisShow=false">X</span>
      <div class="top">{{dialogTitle}}</div>
      <div class="middle">
        <form action="javascript:;">
          <input type="hidden" v-model="stuForm.id">
          学生姓名：<input type="text" v-model="stuForm.sname"><br>
          学生年龄：<input type="number" v-model.number="stuForm.age"><br>
          学生性别：<input type="radio" name="gender" value="0" v-model.number="stuForm.gender">男
          <input type="radio" name="gender" value="1" v-model.number="stuForm.gender">女<br>
          学生专业：
          <select v-model="stuForm.major">
            <option>Java</option>
            <option>Python</option>
            <option>C++</option>
          </select>
          <br>
          学生生日：<input type="date" v-model="stuForm.birthday"><br>
        </form>
      </div>
       <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
      
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="query.pageNow"
                  :page-sizes="[5,8,10]"
                  :page-size="query.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
      
              </div>
            </el-col>
          </el-row>
      <div class="bottom">
        <input type="button" :value="submitButtonValue" @click="editStu">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Student',
  data () {
    return {
      msg: '学生信息表',
      query: {
        pageNow: 1,
        pageSize: 5,
      },
      stuList: [],
      totalPages: 0,
      dialogisShow: false,
      dialogTitle: '添加学生',
      submitButtonValue: '确认添加',
      stuForm: {
        id: 0,
        sname: '',
        age: 0,
        gender: 0,
        major: '',
        birthday: ''
      }
    }
  },
  methods: {
    delStu(id){
      if(confirm("您确定要删除吗？")){
        axios.delete('http://localhost:8080/stu/'+id)
          .then((res)=>{
            if(res.data.code == 200){
              this.getByPage();
            }else{
              alert(res.data.msg);
            }
          }).catch((ex)=>{

        })
      }
    },
    showAdd(){
      this.dialogTitle = "添加学生";
      this.submitButtonValue = "确认添加"
      this.stuForm = {
        id: 0,
        sname: '',
        age: 0,
        gender: 0,
        major: '',
        birthday: ''
      }
      this.dialogisShow = true
    },
    showEdit(id){
      this.dialogTitle = "修改学生";
      this.submitButtonValue = "确认修改"
      //数据回显
      this.$http.get('/stu/'+id)
      .then((res)=>{
        console.log(res.data.code,res.data.data);
        if(res.data.code == 200){
          this.stuForm = res.data.data;
          this.dialogisShow = true;
        }else{
          alert(res.data.msg);
        }
      }).catch((ex)=>{

      })


    },
    editStu(){
      let url = "/stu"
      axios({
        url: url,
        method: this.stuForm.id>0?'put':'post',
        data: this.stuForm
      }).then((resData)=>{
        console.log(resData);
        if(resData.data.code == 200){
          alert("编辑成功");
          this.getByPage();
          this.dialogisShow = false;
        }
      }).catch((ex)=>{

      })
    },
    getByPage(){
      // this.$http.post('/stu/page',this.query)
      //   .then((resData)=>{
      //     console.log(resData)
      //     this.stuList = resData.data.data.rowData;
      //     this.totalPages = resData.data.data.totalPages;
      //     console.log(this.stuList,this.totalPages)
      // }).catch((ex)=>{
      //     console.log(ex);
      // })
      axios.post('http://localhost:8080/stu/page',this.query)
        .then((resData)=>{
          console.log(resData)
          this.stuList = resData.data.data.rowData;
          this.totalPages = resData.data.data.totalPages;
          console.log(this.stuList,this.totalPages)
      }).catch((ex)=>{
          console.log(ex);
      })
    },
    changePage(pageNow){
      this.query.pageNow = pageNow;
      this.getByPage();
    }
  },
  mounted() {
    this.getByPage()
    // axios.get('http://localhost:8080/stu/all').then(res=>{
    //   console.log(res.data)
    // })
    // this.$http.get('/stu/all').then(res=>{
    //   console.log(res.data)
    // })
  }
}
</script>

<style scoped>
  .dataTable{
    width: 70%;
  }
  .dataTable , .dataTable th, .dataTable td{
    border: solid 1px green;
    border-collapse: collapse;
  }
  .pageNav{
    width: max-content;
  }
  .pageNav>li{
    display: inline-block;
  }
  .pageNav a{
    display: inline-block;
    width: 30px;
    height: 30px;
    border: solid 1px olivedrab;
    background-color: greenyellow;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    color: white;
  }

  .pageNav a:hover{
    color: greenyellow;
    background-color: white;
  }

  .pageNav a.now{
    color: greenyellow;
    background-color: white;
  }

  .center{
    margin: 0 auto;
  }

  .maxContent{
    width: max-content;
  }

  .row-container{
    margin-top: 10px;
  }

  .leftQ{
    padding-left: 15%;
  }

  .odd{
    background-color: lightcyan;
  }

  .dialog{
    border: solid 1px deeppink;
    width: 280px;
    padding: 20px;
    background: bisque;
    box-shadow: 5px 5px 15px deeppink;
    position: absolute;
    top: 100px;
    left: 37%;
    /*display: none;*/
  }

  .closeBt{
    width: 20px;
    height: 20px;
    border: solid 1px red;
    display: block;
    text-align: center;
    line-height: 20px;
    background: red;
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .closeBt:hover{
    background-color: white;
    color: red;
  }
</style>
